/*
 * @Author: 徐建辰
 * @Date: 2021-11-03 16:00:04
 * @LastEditTime: 2021-11-08 09:46:29
 * @LastEditors: Please set LastEditors
 * @Description: 首页主文件
 */
import React, {useCallback, useMemo} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {formatTime} from '@/utils/format'
import CitySelector from '@/components/CitySelector'
import DatePicker from '@/components/DatePicker'
import Header from '@/components/Header'
import Mouse from '@/components/Mouse'
import DepartDate from './departdate'
import HignSpeed from './hignspeed'
import Journey from './journey'
import Submit from './submit'
import {
  exchangeFromTo, 
  showCitySelector, 
  hideCitySelector, 
  fetchCityData, 
  setSelectedCity, 
  showDateSelector, 
  hideDateSelector, 
  setDepartDate,
  toggleHighSpeed
} from './store/actions'
import './App.css'

function App(props) {
  const {from, to, highSpeed, dispatch, cityData, isCitySelectorVisible, isLoadingCityData, departDate, isDateSelectorVisible} = props
  // 返回上一页，防止header组件重复render
  const goBack = useCallback(() => {
    window.history.back()
  }, [])

  const callbacks = useMemo(() => {
    return bindActionCreators({
      exchangeFromTo, showCitySelector
    }, dispatch)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const citySelectorCbs = useMemo(() => {
    return bindActionCreators({
      onBack: hideCitySelector,
      onSelect: setSelectedCity,
      fetchCityData
    }, dispatch)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const departDateCbs = useMemo(() => {
    return bindActionCreators({
      onClickDate: showDateSelector
    }, dispatch)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const datePickerCbs = useMemo(() => {
    return bindActionCreators({
      onBack: hideDateSelector
    }, dispatch)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const onSelectDate = useCallback(day => {
    console.log(day)
    if (!day) return
    // 判断是否是过去的日期
    if (day < formatTime()) return
    dispatch(setDepartDate(day))
    dispatch(hideDateSelector())
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const hignSpeedCbs = useMemo(() => {
    return bindActionCreators({
      toggle: toggleHighSpeed
    }, dispatch)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  
  return (
    <div>
      <div className="header-wrapper">
        <Header title="火车票" goBack={goBack} />
      </div>
      <Mouse render={mouse => <p>当前鼠标坐标为：{mouse.x}-----{mouse.y}</p>} />
      <form className="form" action="./query.html">
        <Journey from={from} to={to} {...callbacks} />
        <DepartDate time={departDate} {...departDateCbs} />
        <HignSpeed highSpeed={highSpeed} {...hignSpeedCbs} />
        <Submit />
      </form>
      <CitySelector {...citySelectorCbs} show={isCitySelectorVisible} cityData={cityData} isLoading={isLoadingCityData} />
      <DatePicker {...datePickerCbs} show={isDateSelectorVisible} onSelectDate={onSelectDate} />
    </div>
  )
}

export default connect(state => state, (dispatch) => ({dispatch}))(App)

